什麼是 UI 元件庫？

UI 元件庫（UI Library）就是一整套「已經幫你設計好又可客製的前端元件集合」，讓你不用每次都自己寫按鈕、輸入框、彈窗。
想像成：
「一箱已經設計好的宇宙零件」——你只要組合起來，就能造出太空艙！

在 Vue 生態圈中，最知名的兩個：

• Element Plus：風格偏向簡潔專業，適合儀表板、管理系統。
• Vuetify：以 Material Design 為基礎，動畫順滑、風格一致，適合 App、展示網站。

Element Plus 常用元件介紹

Element Plus 偏向企業風格，乾淨、俐落、文件齊全。

特色：

• 內建 RWD
• 每個元件都有 Props（屬性）控制樣式
• 用法接近原生 HTML，學起來不難

Vuetify 常用元件介紹

Vuetify 走 Material Design 風格，圓角、陰影、動畫超順滑。

特色：

• 有預設主題色系與陰影效果
• 高度整合表單、按鈕、卡片的互動邏輯
• 適合想做「App 感覺」或「有動畫」的設計

實作

1.安裝與啟用
Element Plus：

npm install element-plus

在 main.js 加上：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

Vuetify：

npm install vuetify

然後在main.js：

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({ components, directives })
app.use(vuetify)

2. 基本使用方法
用法其實就像「取代原本的 HTML 標籤」

Element Plus

<template>
  <el-button type="primary">啟動星艦</el-button>
  <el-input v-model="pilot" placeholder="輸入艦長代號" />
</template>

<script setup>
import { ref } from 'vue'
const pilot = ref('')
</script>

Vuetify

<template>
  <v-btn color="purple">出發探索星雲</v-btn>
  <v-text-field label="艦長姓名" v-model="name" />
</template>

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

這樣介面立刻變得「一致又漂亮」，不需要額外寫一堆 CSS！
現在我們知道如何使用 Vue 的 UI 元件庫，快速打造漂亮、專業又一致的介面了～！

參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3